<template>
  <div class="app-container home" style="background-color: #eeeeee;">
    <!-- 头部 -->
    <el-row>
      <el-col :span="24">
        <div style="background-color: #ffffff;height: 100px;">
          <div style="padding: 10px;">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">入库</el-button>
          </div>
          <div class="div1">

            <el-radio-group v-model="queryParams.stockType" @change="clickChange" size="medium">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">登记</el-radio-button>
              <el-radio-button label="2">其他</el-radio-button>
            </el-radio-group>
          </div>
          <p style="margin-top: -40px;margin-left: 230px;">
            <el-input v-model="queryParams.assetCode" placeholder="资产编码" clearable style="width: 240px"
              @keyup.enter.native="" />
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getStockList()"
              style="height: 34px;">查询</el-button>
          </p>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div style="margin-top: 10px;">
          <el-table :data="assetStockList" border  v-loading="loading">
            <el-table-column label="入库单号" align="center" key="stockcode" prop="stockcode" :min-width="120">
              <template slot-scope="scope">
                <span style="font-size: 12px;">{{scope.row.stockcode}}</span>
                <img @click="flow(scope.row)" class="img2" src="../../../assets/image/单据流水.png" />
              </template>
            </el-table-column>
            <el-table-column label="单据状态" align="center" key="status" prop="status" :min-width="100">
              <template slot-scope="scope">
                <button class="but1" v-if="scope.row.auditType == 3">待审核</button>
                <button class="but2" v-if="scope.row.auditType == 2">已拒绝</button>
                <button class="but3" v-if="scope.row.auditType == 1">已审核</button>
                <button class="but4" v-if="scope.row.auditType == 4">已撤销</button>
              </template>
            </el-table-column>
            <el-table-column label="资产编码" align="center" key="eamAsset.assetCode" prop="eamAsset.assetCode"
              :min-width="110" />
            <el-table-column label="资产名称" align="center" key="assetName" prop="eamAsset.assetName"></el-table-column>
            <el-table-column label="资产类型" align="center" key="eamType.typeName" prop="eamType.typeName" />
            <el-table-column label="入库类型" align="center" key="stockType" prop="stockType">
              <template slot-scope="scope">
                <span v-if="scope.row.stockType == 1">登记入库</span>
                <span v-if="scope.row.stockType == 2">盘点入库</span>
                <span v-if="scope.row.stockType == 3">调拨入库</span>
              </template>
            </el-table-column>
            <el-table-column label="经办人" align="center" key="user.nickName" prop="user.nickName" />
            <el-table-column label="创建时间" align="center" key="createTime" prop="createTime" :min-width="110" />
            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button class="elbut" size="mini" type="text" @click="review(scope.row.stockId)"
                  :disabled="scope.row.auditType != 3  || roles == 'common'" >审核</el-button>
                <el-button class="elbut" size="mini" type="text" :disabled="scope.row.auditType != 1"
                  @click="revoke(scope.row)">撤销</el-button>
                <el-button class="elbut" size="mini" type="text"
                  @click="handleUpdate(scope.row)">修改</el-button>
                <el-button class="elbut" size="mini" type="text"
                  @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <pagination class="fy" v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getStockList" />
      </el-col>
    </el-row>


    <!-- 入库或修改入库配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body style="margin-left: 150px;">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="入库类型" prop="stockType">
              <el-select clearable v-model="form.stockType">
                <el-option v-for="item in stockTypes " :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库日期" prop="stockTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.stockTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="存放位置" >
              <el-select clearable  v-model="needLocationId" @change="changeCk">
                <el-option v-for="item in locationList" :key="item.locationId" :value="item.locationId"
                  :label="item.locationName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经办人" prop="handlePerson">
              <el-select clearable v-model="form.handlePerson">
                <el-option :value="item.userId" v-for="item in userList" :key="item.userId" :label="item.nickName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-button type="" plain size="mini" @click="chgClear">清空<strong></strong></el-button>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="div-yj">
              <div>
                <el-table :data="chgList" border>
                  <el-table-column label="序号" align="center" prop="index">
                    <template #default="scope">
                      {{scope.$index + 1}}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" :min-width="60">
                    <template #default="scope">
                      <div class="box_scope">
                        <img src="../../../assets/image/加.png" @click="add()" />
                        <img src="../../../assets/image/减.png" @click="minus(scope.$index)" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="选择资产" align="center" prop="xzasset" :min-width="150">
                    <!-- 使用作用域插槽自定义列内容 -->
                    <template slot-scope="scope">
                      <!-- 在作用域插槽内插入文本框 -->
                      <img @click="openAsset()" class="img1" src="../../../assets/image/搜索.png" />
                      <el-input v-model="scope.row.assetCode"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="资产名称" align="center" prop="assetName" />
                  <el-table-column label="数量" align="center" prop="assetNum" />
                  <el-table-column label="金额" align="center" prop="price" />
                  <el-table-column label="规格" align="center" prop="asseSpec" />
                  <el-table-column label="型号" align="center" prop="model" />
                  <el-table-column label="报废日期" align="center" prop="scrapTime" />
                </el-table>

              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
        <el-button type="primary" @click="submitForm()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择资产 -->
    <el-dialog :title="title2" :visible.sync="open2" width="1000px" append-to-body>
      <el-row>
        <el-col :span="24">
          <el-input placeholder="资产名称" maxlength="30" style="width: 200px;" v-model="asset.assetName" clearable />&nbsp;
          <el-select clearable placeholder="全部资产类型" v-model="asset.typeId">
            <el-option :value="item.typeId" v-for="item in eamType" :key="item.typeId" :label="item.typeName">
            </el-option>
          </el-select>&nbsp;
          <el-select clearable placeholder="全部存放位置" v-model="asset.locationId">
            <el-option :value="item.locationId" v-for="item in locationList" :key="item.locationId"
              :label="item.locationName">
            </el-option>
          </el-select>&nbsp;
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getAssetList"
            style="height: 34px;">查询</el-button>
          <p></p>
          <el-table :data="assetLists" border style="padding-top: 10px;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="资产名称" align="center" prop="assetName" />
            <el-table-column label="资产编码" align="center" prop="assetCode" :min-width="150" />
            <el-table-column label="资产类型" align="center" prop="eamType.typeName" />
            <el-table-column label="规格" align="center" prop="asseSpec" />
            <el-table-column label="型号" align="center" prop="model" />
            <el-table-column label="资产金额(元)" align="center" prop="price" />
            <el-table-column label="报废日期" align="center" prop="scrapTime" />
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <pagination class="fy" v-show="total2>0" :total="total2" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getAssetList" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()" :disabled="single">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 单据流水 -->
    <el-dialog :title="title3" :visible.sync="open3" width="620px" append-to-bod>
      <div
        style="width: 500px;height: 50px;border: 1px solid #006eff;margin-left: 50px;padding-left: 10px;background-color: #e6eff4;">
        <p><span>入库单号:&nbsp;</span><span style="font-weight: bold;">{{voucher.stockcode}}</span></p>
      </div>
      <p></p>
      <div>
        <el-timeline>
          <el-timeline-item timestamp="2018/4/12" placement="top" :color="auditColor">
            <span style="font-weight: bold;font-size: 14px;">新增草稿单</span>
            <el-card>
              <h4 style="font-weight: bold;">经办人发起申请</h4>
              <p class="p1"><span>{{voucher.nickName}}</span><span>({{voucher.deptName}})</span><span
                  style="margin-left: 50px;">账号所属机构名称</span></p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top" :color="auditColor2">
            <span style="font-weight: bold;font-size: 14px;">审核</span>
            <el-card>
              <h4 style="font-weight: bold;" v-if="voucher.auditType == 1">已同意</h4>
              <h4 style="font-weight: bold;" v-if="voucher.auditType == 2">已拒绝</h4>
              <h4 style="font-weight: bold;" v-if="voucher.auditType == 3">待审核</h4>
              <h4 style="font-weight: bold;" v-if="voucher.auditType == 4">已撤销</h4>
              <div
                style="width: 450px;height: 40px;border: 1px solid #e7e7e7;background-color: #f0f0f0;padding:8px;font-size: 14px;font-family: 楷体;">
                <span>{{voucher.auditReason}}</span>
              </div>
              <p class="p1"><span>{{voucher.auditPersonName}}</span><span>({{voucher.auditDeptName}})</span><span
                  style="margin-left: 50px;">账号所属机构名称</span></p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-button @click="cancel3" style="margin-left: 485px;">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 审核 -->
    <el-dialog :title="title4" :visible.sync="open4" width="620px" append-to-bod>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div>
          <el-form-item label="审核原因:" prop="nickName">
            <el-input v-model="form.auditReason" type="textarea" maxlength="100" show-word-limit :rows="4"> </el-input>
          </el-form-item>
        </div>
        <div style="text-align: right;margin-top: 10px;">
          <el-button @click="cancel4">取 消</el-button>
          <el-button type="warning" @click="notPass()">不通过</el-button>
          <el-button type="primary" @click="pass()">通过</el-button>
        </div>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
  import {
    add,
    addD,
    selectListStock,
    selectUserList,
    selectLocationList,
    selectAssetList,
    getAssetInfo,
    updateaUdit,
    selectEamTypeList,

  } from "@/api/eam-wx/stock"
  import {
    reduce
  } from "zrender/lib/core/util";
  import {
    getInfo
  } from "@/api/login";
  export default {
    name: '',
    data() {
      return {
        key: '',
        id: 1,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //单据状态
        statusShow: 1,
        //自动编码
        checked1: true,
        //是否批量新增默认false
        checked2: false,
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        total2: 0,
        // 弹出层标题
        title: "",
        //选择资产标题
        title2: "",
        //选择单据流水标题
        title3: "",
        title4: "",
        // 部门树选项
        deptOptions: undefined,
        // 是否显示弹出层
        open: false,
        open2: false,
        //单据流水
        open3: false,
        open4: false,
        // 表单参数
        form: {

        },
        defaultProps: {
          children: "children",
          label: "label"
        },
        rules: {
            stockType: [{
              required: true,
              message: "请选择入库类型",
              trigger: "change"
            }],
            stockTime: [{
              required: true,
              message: "请选择入库日期",
              trigger: "change"
            }],
            needLocationId: [{
              required: true,
              message: "请选择入库类型",
              trigger: "change"
            }],
            handlePerson: [{
              required: true,
              message: "请选择入库类型",
              trigger: "change"
            }],
        },
        assetStockList: null,
        assetrkList: null,
        //分页
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          assetCode: undefined,
          stockType: 0
        },
        stockTypes: [{
          value: 1,
          label: '登记入库'
        }, {
          value: 2,
          label: '盘点入库'
        }, {
          value: 3,
          label: '调拨入库'
        }],
        userList: null,
        locationList: null,
        assetList: null,
        assetLists: [], //资产集合
        selectList: [],
        assetIds: [{
          index: 1
        }],
        voucher: {
          stockcode:'',
          nickName: '',
          deptName:'',
          auditReason:'',
          userName:''
        },
        auditColor: undefined,
        auditColor2: undefined,
        stockId: '',
        locationId: undefined,
        stockList: [],
        eamType: [],
        chgList: [{}], //入库单集合
        eamList: [], //资产集合 存放选中的集合
        asset: { //资产
          assetName: undefined,
          TypeId: undefined,
          locationId: undefined
        },
        user: {},
        isAddUpdate: 1,
        roles:undefined,
        needLocationId:undefined,

      }
    },
    components: {

    },
    props: [],
    mounted() {

    },
    created() {
      this.getStockList();
      this.getUserList();
      this.getLocationList();
      this.getAssetList();
      this.getAssetTypeList();
      getInfo().then(res => {
        this.user = res.user;
        this.roles = res.roles;
      })
    },
    methods: {
      /** 查询入库列表 */
      getStockList() {
        this.loading = true;
        selectListStock(this.queryParams).then(res => {
          // console.log(JSON.stringify(res))
          this.assetStockList = res.rows;
          this.total = res.total;
          this.loading = false;
        })
      },
      /** 查询用户下拉列表 */
      getUserList() {
        this.loading = true;
        let obj = {};
        obj.deptId = 112;
        selectUserList(obj).then(res => {
          this.userList = res.rows;
        })
      },
      /** 查询存放位置下拉列表 */
      getLocationList() {
        this.loading = true;
        selectLocationList().then(res => {
          this.locationList = res.rows;
        })
      },
      /** 查询固定资产列表 */
      getAssetList() {
        selectAssetList(this.asset).then(res => {
          this.assetLists = res.rows;
          this.total2 = res.total;
        })
      },
      /** 查询资产类型下拉列表 */
      getAssetTypeList() {
        this.loading = true;
        selectEamTypeList().then(res => {
          this.eamType = res.rows;
        })
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.isAddUpdate = 1;
        this.title = "入库单";
      },
      //修改按钮操作
      handleUpdate(row) {
        this.form = row;
        this.needLocationId = row.eamAsset.locationId;
        this.chgList = [];
        this.chgList.push(row.eamAsset)
        //console.log(JSON.stringify(row))
        this.reset();
        this.isAddUpdate = 2;
        this.open = true;
        this.title = "编辑入库单";
      },
      /** 提交按钮 */
      submitForm: function() {
        let _this = this;
        if(this.needLocationId == 0){
          this.$message.warning("请选择存放位置")
          return;
        }
        if(this.chgList[0].assetCode == null){
          this.$message.warning("请选择需要入库的资产")
          return;
        }
        if(_this.form.stockcode != null){   //修改
          if(this.roles == "common"){
            if(this.user.userId != this.form.creator){
              this.$message.warning("您没有此权限");
              return;
            }
          }
          if (this.form.auditType == 1) {
            this.$message.warning(this.form.stockcode + "单号已处理，无法修改");
            return;
          }
        }
        _this.$refs["form"].validate((valid) => { //添加表单验证
            if (valid) {
              this.addStock();
            }
          })
      },
      /** 审核通过 */
      review(stockId) {
        //获取当前登录用户为创建人,制单人
        getInfo().then((res) => {
          this.form.auditPerson = res.user.userId;
        })
        this.form.stockId = stockId;
        this.reset();
        this.open4 = true;
        this.title4 = "系统提示";
      },
      pass() {
        const now = new Date(); // 创建一个新的Date对象来获取当前时间
        const formattedDate =
          `${now.getFullYear()}-${('0' + (now.getMonth() + 1)).slice(-2)}-${('0' + now.getDate()).slice(-2)}`;
        this.form.auditType = 1;
        this.form.auditTime = formattedDate; // 将时间转换为本地字符串格式
        // console.log(JSON.stringify(this.form))
        updateaUdit(this.form).then(res => {
          this.$modal.msgSuccess("审核通过");
          this.open4 = false;
          this.form.auditReason = "";
          this.getStockList();
        });
      },
      //审核不通过
      notPass() {
        this.form.auditType = 2;
        //alert(JSON.stringify(this.form))
        updateaUdit(this.form).then(res => {
          this.$modal.msgError("审核不通过!");
          this.open4 = false;
           this.form.auditReason = "";
          this.getStockList();
        });
      },
      revoke(row) { //撤销按钮
        if(this.roles == "common"){
          if(this.user.userId != row.creator){
            this.$message.warning("您没有此权限");
            return;
          }
        }
        this.form.stockId = row.stockId;
        this.form.auditType = 4;
        this.$confirm('是否撤回' + row.allotOdd + "单号", '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateaUdit(this.form).then(res => {
            this.$modal.msgSuccess("撤销成功!");
            this.getStockList();
          });
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.form = {};
        this.needLocationId = null;
        this.locationId = undefined;
        this.chgList = [{}];
        this.$refs["form"].resetFields();
        this.reset();
      },
      cancel2() {
        this.open2 = false;
        this.reset();
      },
      cancel3() {
        this.auditColor = "";
        this.auditColor2 = "";
        this.open3 = false;
        this.reset();
      },
      cancel4() {
        this.open4 = false;
        this.reset();
         this.form.auditReason = "";
      },
      // 表单重置
      reset() {},
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //选择资产
      openAsset() {
        this.open2 = true;
        this.title2 = "选择资产";
        if (this.chgList[0].assetId != null) {
          selectAssetList(this.asset).then(res => {
            this.assetLists = res.rows;
            this.chgList.forEach((item, index) => {
              this.assetLists.forEach((item1, index1) => {
                if (item.assetId == item1.assetId) {
                  this.assetLists.splice(index1, 1);
                }
              })
            })
            this.loading1 = false;
          })
        } else {
          selectAssetList(this.asset).then(res => {
            this.assetLists = res.rows;
            this.loading1 = false;
          })
        }
      },
      changeCk(value){
       this.form.locationId = value;



      },
      //单据流水
      flow(row) {
        // this.reset();
        this.auditColor = "#4ab0f9";
        if (row.auditType == 1) {
          this.auditColor2 = "#4ab0f9";
        }
        this.voucher.stockcode = row.stockcode;
        this.voucher.nickName = row.user.nickName;
        this.voucher.deptName = row.dept.deptName;
        this.voucher.auditReason = row.auditReason;
        this.voucher.auditType = row.auditType;
        this.voucher.auditPersonName = row.auditPersonName;
        this.voucher.auditDeptName = row.auditDeptName;
        this.open3 = true;
        this.title3 = "单据流水";
      },
      //根据资产编码查询入库记录
      selectQuery() {
        alert(JSON.stringify(this.queryParams.assetCode))
        this.queryParams.pageNum = 1;
        this.getStockList();
      },
      add() { //添加一行列表
        let chg = new Object();
        this.chgList.push(chg);
      },
      minus(index) { //删除一行列表
        if (this.chgList.length > 1) {
          this.chgList.splice(index, 1);
        }
      },
      // 多选框选中数据
      handleSelectionChange(assetList) {
        this.eamList = assetList;
        // this.assetLists = assetList;
        if (this.isAddUpdate == 1) {
          this.single = assetList.length == 0;
        } else {
          this.single = assetList.length > 1 || assetList.length == 0;
        }

        this.multiple = !assetList.length;
      },
      submit() { //选择资产确定按钮
        let _this = this;
        if (this.isAddUpdate == 1) {
          if (this.eamList.length > 0) {
            if (this.chgList[0].assetCode == null) {
              this.chgList = this.eamList;
            } else {
              if (this.chgList[this.chgList.length - 1].assetCode == null) {
                this.chgList.splice(this.chgList.length - 1, 1);
              }
              this.eamList.forEach((item, index) => {
                this.chgList.push(item);
              })
            }
          }
          this.chgList.forEach((item, index) => {
            item.index = index + 1;
          })
          this.open2 = false;
          this.chgList.forEach((item, index) => {
            this.assetLists.forEach((item1, index1) => {
              if (item.assetId == item1.assetId) {
                _this.assetLists.splice(index1, 1);
              }
            })

          })
        } else {
          this.chgList = this.eamList;
          this.open2 = false;
        }

      },
      //el-radio-group点击事件
      clickChange(lab) {
        if (this.lab === 2) {
          let obj = this.queryParams.stockType = [2, 3]
          return obj;
        } else {
          this.getStockList();
        }
      },
      clickRadio() { //按钮实现反选
        this.radio === "1"
        this.clickChange();
      },
      del(row) { //删除入库订单
        let _this = this;
        if(this.roles == "common"){
          if(this.user.userId != row.creator){
            this.$message.warning("您没有此权限");
            return;
          }
        }
        this.$modal.confirm('是否确认删除入库单号为"' + row.stockcode + '"的入库记录?').then(function() {
          _this.form.isDel = 0;
          _this.form.stockId = row.stockId;
          updateaUdit(_this.form).then(res => {
            _this.getStockList();
            _this.$modal.msgSuccess("删除成功");
          })
        })

      },
      chgClear() { //清空
        this.chgList = [{
          index: 1
        }]
        this.loading1 = true;
        selectAssetList(this.asset).then(res => {
          this.assetList = res.rows;
          this.loading1 = false;
        })
      },
      addStock() {
        let _this = this;
        this.form.locationId = this.needLocationId
        //修改资产
        this.chgList.forEach((item, index) => {
          item.locationId = _this.form.locationId;
        })
        let obj = new Object();
        this.form.creator = this.user.userId;
        this.form.auditType = 3;
        obj.stock = this.form;
        obj.eamAssets = this.chgList;
        add(obj).then((res) => {
          _this.$modal.msgSuccess(res.msg);
          this.getStockList();
          this.cancel();
          this.open = false;
        })
      },
      getEamList() {
      },
    }
  }
</script>

<style scoped>
  /* 头部 */
  .div1 {
    width: 250px;
    height: 40px;
    border-radius: 3px;
    margin-left: 10px;

  }


  /* //分页 */
  .fy {
    margin-top: -8px;
    height: 50px;

  }

  /* 未入库资产列表 */
  .div-yj {
    background-color: #ffffff;
    height: 400px;
    text-align: center;
    margin-top: 10px;
    overflow-y: auto;
    text-align: left;
  }

  /* 搜索图片 */
  .img1 {
    height: 20px;
    position: absolute;
    z-index: 1;
    /* 设置图片的z-index值高于其他元素 */
    right: 15px;
    top: 18px;
    cursor: pointer;
    /* 将鼠标指针设置为手形 */
    transition: background-color 0.3s ease;
    /* 添加过渡效果 */
  }

  /* 单据状态 */
  .but1 {
    color: sandybrown;
    border-radius: 30px;
    font-size: 11px;
    background-color: #ffdcbc;
    border: 1px solid sandybrown;
  }

  .but2 {
    color: #6d6d6d;
    border-radius: 30px;
    font-size: 11px;
    background-color: #d3d3d3;
    border: 1px solid #7d7d7d;
  }

  .but3 {
    color: #4ab0f9;
    border-radius: 30px;
    font-size: 11px;
    background-color: #e6eff4;
    border: 1px solid #4ab0f9;
  }

 .but4 {
   color: #550000;
   border-radius: 30px;
   font-size: 11px;
   background-color: #d1d9dd;
   border: 1px solid #550000;
 }

  /* 单据流水 */
  .img2 {
    height: 15px;
    display: block;
    margin-left: 132px;
    margin-top: -18.5px;
    cursor: pointer;
  }

  /* 入库单的加减图片 */
  .box_scope img {
    width: 25px;
    height: 22px;
    float: left;
    margin-left: 7px;
  }

  .box_scope img:hover {
    cursor: pointer;
  }

  .p1 {
    font-size: 13px;
  }

  .elbut:hover {
    transition: background-color 0.3s ease;
    /* 添加过渡效果 */
    text-decoration: underline;
  }
</style>
